<template>
	<view class="stores">
		<base-navbar back-color="#fff" :is-back="false">
			<template #back>
				<view class="nav-location">
					<uni-icons type="location-filled" size="22"></uni-icons>
					<text class="label">{{location.street}}</text>
				</view>
			</template>
			<template #default>
				<view class="nav-search">
					<uni-search-bar v-model="keyword" placeholder="请输入店铺名称" cancel-button="" radius="32"
						@keydown.enter="searchStore"></uni-search-bar>
				</view>
			</template>
		</base-navbar>
		<!-- <uni-nav-bar title="门店" status-bar fixed :border="false" left-width="auto">
			<template #left>
				<view class="nav-location">
					<uni-icons type="location-filled" size="22"></uni-icons>
					<text class="label">{{location.street}}</text>
				</view>
			</template>
			<template #default>
				<view class="nav-search">
					<uni-search-bar v-model="keyword" placeholder="请输入店铺名称" cancel-button="" radius="32"
						@keydown.enter="searchStore"></uni-search-bar>
				</view>
			</template>
		</uni-nav-bar> -->

		<view class="content">
			<view class="store-list" v-if="storeList.length>0">
				<store-item v-for="(item, index) in storeList" :store="item" :key="index"></store-item>
			</view>
			<view v-else>
				<c-empty></c-empty>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		keyword: '',
		storeList: [],
		isMore: false,
		location: {
			province: '定位中...',
			city: '定位中...',
			area: '定位中...',
			town: '定位中...',
			street: '定位中...',
			address: '',
			areaCode: '',
		}, // 定位信息,
	});

	onLoad((opt) => {
		getPosition();
		getStoreList();
	});

	onShow(() => {});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
		if (state.isMore) {
			getStoreList();
		}
	});

	function getPosition() {
		request.get('amapaddress/regeo', {
			longitude: cache.get('longitude') || '',
			latitude: cache.get('latitude') || '',
		}).then(res => {
			// console.log('地址逆解析', res);
			state.location = res.data;
		});
	}

	function getStoreList() {
		request.get('store/searchStore', {
			keyword: state.keyword,
			skip: state.storeList.length,
			longitude: cache.get('longitude'),
			latitude: cache.get('latitude'),
		}).then(res => {
			console.log('Store', res);
			state.isMore = res.data.is_more;
			if (state.storeList.length == 0) {
				state.storeList = res.data.data;
			} else {
				state.storeList.concat(res.data.data);
			}
		})
	}

	function searchStore() {
		state.storeList = [];
		getStoreList();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		keyword,
		storeList,
		isMore,
		location,
	} = toRefs(state);
</script>

<style lang="scss">
	.stores {
		.nav-location {
			@include f-center;
			max-width: 260rpx;

			.label {
				@include ellipsis;
				flex: 1;
			}
		}

		.nav-search {
			@include f-center;
			width: 100%;

			:deep(.uni-searchbar) {
				width: 100%;
				padding: 0;
			}
		}

		.content {
			padding: $margin-24;

			.store-list {
				padding: 0 $margin-24;
				background-color: $bg-inverse-color;
				border-radius: $radius-12;
			}
		}
	}
</style>